<template>
    <div class="question-use-wrapper">
        <el-dialog title="引入考题" custom-class="dialogStyle" v-if="dialogVisible" :visible.sync="dialogVisible"
            :before-close="handleClose">
            <div class="actions" style="margin-bottom: 10px">
                <div class="left">
                    <el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button>
                    <!-- <el-button type="primary" plain size="mini" @click="handleDel">删除</el-button> -->
                </div>
                <div class="right">
                    <el-pagination small :current-page="paginations.pageIndex" :page-sizes="paginations.pageSizes"
                        :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
            <el-table ref="multipleTable" :max-height="400" :row-key="(item) => item.id" :data="tableData" border stripe align="center"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" :reserve-selection="true" width="45"> </el-table-column>
                <el-table-column prop="" label="序号" width="50" type="index"></el-table-column>
                <el-table-column prop="question_type" label="类型" width="120">
                    <template slot-scope="scope">
                        {{ QUES_TYPE[scope.row.question_type] }}
                    </template>
                </el-table-column>
                <el-table-column prop="question" label="题目描述">
                </el-table-column>
                <el-table-column prop="score" label="分数"  width="120">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleOk">确 定</el-button>
            </span>
        </el-dialog>
        <QuestionEdit :dialogVisible="quesDialogVisible" v-if="quesDialogVisible" mode="add" @close="handleCloseQuesDialog">
        </QuestionEdit>

    </div>
</template>

<script>
import { ExamQuestionList } from '@/api/qms.js';
import QuestionEdit from './questionEdit.vue';
import { QUES_TYPE, QUES_TYPEDATA } from "@/page/qms/constants";

export default {
    name: 'questionUse',
    components: { QuestionEdit },
    props: ['dialogVisible', 'checkdQuestions'],
    data() {
        return {
            tableData: [],
            paginations: {
                pageIndex: 1, // 当前位于哪页
                pageSize: 20, // 1页显示多少条
                pageSizes: [10, 20, 50, 100], //每页显示多少条
                total: 200,
                layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
            },
            checkedList: [],
            searchParams: {},
            quesDialogVisible: false,
            QUES_TYPE
        };
    },
    mounted() {
        this.getDataList();

    },
    methods: {
        handleOk() {
            this.$emit('ok', this.checkedList);
            this.$emit('close', true);
        },
        handleAdd() {
            this.quesDialogVisible = true;
        },
        handleClose() {
            this.$emit('close');
        },
        handleCloseQuesDialog(isUpdate) {
            this.quesDialogVisible = false;
            isUpdate && this.getDataList();
        },
        initCheck() {
            this.$nextTick(() => {
                for (const item of this.tableData) {
                    //   if (this.checkedBind && this.checkedBind.find(t => Number(t.thermometer_id) === item.id)) {
                    //     this.$refs.multipleTable.toggleRowSelection(item, true);
                    //   }
                    if (this.checkdQuestions && this.checkdQuestions.find(q => q.question_id === item.id)) {
                        this.$refs.multipleTable.toggleRowSelection(item, true);
                    }
                }
            });
        },
        getDataList() {
            ExamQuestionList({
                page: this.paginations.pageIndex,
                page_size: this.paginations.pageSize,
                ...this.searchParams,
            }).then((res) => {
                this.tableData = res.data.list || [];
                this.paginations.total = res.data.pagination.total;
                this.initCheck();
            });
        },
        // 每页条数改变
        handleSizeChange(val) {
            this.paginations.pageSize = val;
            this.getDataList();
        },
        // 当前页改变
        handleCurrentChange(val) {
            this.paginations.pageIndex = val;
            this.getDataList();
        },
        handleSelectionChange(checked) {
            this.checkedList = checked;
        },
    },
};
</script>
<style lang="scss" scoped>
.question-use-wrapper {
    .actions {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        background-color: #fff;

        .el-button+.el-dropdown,
        .el-dropdown+.el-button {
            margin-left: 10px;
        }
    }
}

/deep/.dialogStyle {
    width: 640px !important;
}
</style>
